<template>
  <div class="left-view">
    <div class="section section-left">
      <div class="header">
        <img
          src="@/assets/img/huo@2x.png"
          alt=""
          class="sub2_1"
          style="margin-left: 0px; width: 24px; height: 24px"
        />
        <text class="sub2-text">货</text>
        <text class="sub2-text1">-限定卖货范围</text>
      </div>
      <div class="group-box">
        <div class="group-title">选择商品分组</div>
        <button class="group-btn">2023春夏数量储备充足</button>
        <img src="@/assets/img/arrow@2x.png" alt="" class="group-ls" />
        <div class="stats">
          <div class="stat-item" v-for="(item, index) in stats" :key="index">
            <div class="label">{{ item.label }}</div>
            <div class="value">{{ item.value }}</div>
          </div>
        </div>
        <div class="action-btn">商品详情</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const stats = [
  { label: "款数", value: "834" },
  { label: "库存", value: "29,234" },
  { label: "历史", value: "3年" },
  { label: "售罄率", value: "60%" },
  { label: "主推品类", value: "T衫" },
  { label: "价格带", value: "¥ 1,000-3,000" },
  { label: "动销率", value: "56%" },
  { label: "销售节奏", value: "畅销" },
];
</script>

<style scoped lang="scss">
@use "../index.scss";

.left-view {
  display: flex;
  width: 100%;
  height: 100%;
  background: #fff;
}
.section {
  flex: 1;
}
.header {
  display: flex;
  align-items: center;
  flex: 1;
  height: 36px;
  margin-left: 20px;
}
.group-box {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.group-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 25.2px;
  color: rgba(10, 31, 55, 1);
}
.group-btn {
  border: none;
  padding: 6px 12px;
  margin-bottom: 15px;
  border-radius: 4px;
  width: 222px;
  height: 40px;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 22.4px;
  color: rgba(10, 31, 55, 1);
  transition: all 0.2s ease;
  &:hover {
    background: rgba(255, 255, 255, 1);
  }
}
.group-ls {
  height: 34px;
  width: 34px;
  cursor: pointer;
}
.action-btn {
  width: 94px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 168px;
  background: rgba(252, 151, 73, 1);
  border: none;
  padding: 0 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  .action-btn:hover {
    background-color: #e0e0e0 !important;
  }
}
.label {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 20px;
  color: rgba(10, 31, 55, 0.6);
  text-align: left;
}
.value {
  margin-top: 15px;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.9);
  text-align: left;
}
.stats {
  height: 200px;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 10px;
}

.stat-item {
  padding: 3px;
  color: white;
  font-size: 14px;
}

.stat-item.even {
}
</style>
